import React, { useCallback, useState } from "react";
import useCounter from "./hooks/useCounter";
import useInterval from "./hooks/useInterval";

const Counter: React.FC = () => {
  const [delay, setDelay] = useState(1000);
  const count = useCounter(delay);

  const onChangeBackgroundColor = useCallback(() => {
    const randomColor = `hsla(${Math.random() * 360}, 100%, 50%, 0.2)`;
    document.body.style.backgroundColor = randomColor;
  }, []);

  useInterval(onChangeBackgroundColor, 2000);

  return (
    <>
      <label>
        Tick duration:{delay}
        <br />
        <input type="range" value={delay} min="10" max="2000" onChange={e => setDelay(Number(e.target.value))} />
        <hr />
        <h1>Ticks:{count}</h1>
      </label>
    </>
  );
};
export default Counter;
